<template>
  <div class="rankView">
    <!-- 综合排名 -->
    <div class="titleBox">
      <div style="display: flex; align-items: center">
        <div class="titleView">综合排名</div>
        <i class="el-icon-info iconView" />
      </div>
      <el-button type="primary" @click="toImport">导出</el-button>
    </div>
    <!-- 详细内容 -->
    <div class="rankContetView">
      <div class="searchView">
        <el-date-picker
          v-model="startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始时间"
          style="flex: 1; margin-right: 10px"
          @change="setStartTime"
        />
        <el-date-picker
          v-model="endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束时间"
          style="flex: 1; margin-right: 10px"
          @change="setEndTime"
        />
        <div
          v-for="(item, index) in timeList"
          :key="index"
          :class="currentTimeType == item.value ? 'timeItemView-select' : ''"
          class="timeItemView"
          @click="setCurrentTimeType(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- table -->

      <el-table
        :data="tableData"
        :max-height="maxHeight"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column type="index" label="排名" width="60" />
        <el-table-column prop="dw" label="单位" width="100" />
        <el-table-column prop="zhfz" label="综合分值" width="180">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <div style="width: 40px">{{ scope.row.zhfz || 0 }}</div>
              <el-progress
                style="flex: 1; margin-left: 10px"
                :percentage="Number(scope.row.zhfz || 0)"
                :show-text="false"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hb" label="环比">
          <template slot="header" slot-scope="scope">
            <div style="display: flex; align-items: center">
              <div>综合排名</div>
              <i class="el-icon-info iconView" />
            </div>
          </template>
          <template slot-scope="scope"> {{ scope.row.hb || 0 }}% </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getZhpm } from "@/api/drug";
export default {
  data() {
    const maxH = window.screen.height - 280;
    return {
      startTime: "",
      endTime: "",
      currentTimeType: "0",
      maxHeight: maxH,
      timeList: [
        { label: "今日", value: "0" },
        { label: "近一周", value: "1" },
        { label: "近一月", value: "2" },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.getRequest();
  },
  methods: {
    setStartTime(value) {
      this.startTime = value;
      this.getRequest();
    },
    setEndTime(value) {
      this.endTime = value;
      this.getRequest();
    },
    getRequest() {
      getZhpm({
        start: this.startTime,
        end: this.endTime,
        interval: this.currentTimeType,
      }).then((response) => {
        this.tableData = response.data;
      });
    },
    setCurrentTimeType(item) {
      this.currentTimeType = item.value;
      this.getRequest();
    },
    toImport() {
      console.log(this.startTime);
      this.download(
        "assess/zhpm/export",
        {
          start: this.startTime,
          end: this.endTime,
          interval: this.currentTimeType,
        },
        `综合排名_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.rankView {
  width: 100%;
  height: calc(100vh - 130px);
  background: #fff;
  box-shadow: 0 0 6px #ccc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.titleView {
  font-size: 1vw;
  font-weight: bold;
}
.iconView {
  font-size: 18px;
  margin-left: 15px;
  color: rgb(64, 158, 255);
}
.rankContetView {
  padding: 20px 10px;
}
.searchView {
  display: flex;
  align-items: center;
}
.timeItemView {
  margin-right: 10px;
  cursor: pointer;
  font-size: 15px;
}
.timeItemView-select {
  font-size: 20px;
  color: rgb(64, 158, 255);
}
</style>
